<template>
  <el-dialog
  title="管理员信息数据"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%">
  <div class="main_top">
  <p class="part-title" style="margin-top: 5px;">头像信息</p>
  <el-upload
    class="avatar-uploader"
    :action="uploadImg()"
    :show-file-list="false"
    :on-success="handleAvatarSuccess">
    <img v-if="this.dataForm.avatar" :src="this.dataForm.avatar" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  <p class="part-title" style="margin-top: 5px;">修改管理员信息</p>

  <span slot="footer" class="dialog-footer">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="账号" prop="account">
        <el-input v-model="dataForm.account"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="dataForm.password"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="adminName">
        <el-input v-model="dataForm.adminName"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="genderName">
        <el-radio-group v-model="genderName">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="dataForm.mobile"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dataForm.email"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dataFormCancel()">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </span>
  </div>
  </el-dialog>
</template>

<script>
 /* eslint-disable */
 import UploadImage from '../../compont/upload-image.vue'

  export default {
    components: {UploadImage},

      data () {
        return {
          id:'',
          pageIndex: 1,
          visible: false,
          uploadImageVisible: false,
          dataForm: {
            account: '',
            adminName: '',
            avatar: '',
            email: '',
            gender: '',
            mobile: '',
            password:''
          },
          genderName:''
        }
      },
      methods: {
        dataFormCancel () {
          this.visible = false,
          this.genderName = '',
          this.dataForm.avatar=''
          this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
          })
        },
        uploadImg() {
          return this.$http.adornUrl('/file/image');
        },
        handleAvatarSuccess(response) {
          if (response.success) {
            this.dataForm.avatar = response.data
          }else{
            this.$message.error(response.message)
          }
         },
         //查询详情信息
         dataFormDetail () {
           this.$http({
             url: this.$http.adornUrl('/admin/getAdminInfoById'),
             method: 'get',
             params: this.$http.adornParams({
               'id': this.id
             })
           }).then(({data}) => {
               if (data.success) {
                 this.dataForm = data.data
                 if(data.data.gender == 1){
                   this.genderName = "男"
                 }
                 else{
                   this.genderName = "女"
                 }
               }else{
                 this.$message.error(data.message)
               }
             })
         },

        // 表单提交
        dataFormSubmit () {
              this.$http({
                url: this.$http.adornUrl('/admin/addAdminInfo'),
                method: 'post',
                data: this.$http.adornData({
                  'account': this.dataForm.account,
                  'adminName': this.dataForm.adminName,
                  'avatar': this.dataForm.avatar,
                  'email': this.dataForm.email,
                  'gender': this.genderName == "男" ? 1 : 2,
                  'mobile': this.dataForm.mobile,
                  'password':this.dataForm.password
                })
              }).then(({data}) => {
                if (data.success) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$nextTick(() => {
                      this.$emit('refreshDataList')
                      })
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
          },
        init (id) {
          this.id = id
          this.visible = true
          this.dataFormDetail(id)
        },
        cancel(){
          this.visible = false
        }
      }
    }
</script>

<style>
  .part-title {
      margin: 20px 0;
      color: #000;
      padding-left: 1em;
      font-size: 16px;
      position: relative;
      display: inline-block;
      width: 100%;
  }
  .part-title:before{
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 1em;
    background-color: #4976e8;
  }
 .text {
    font-size: 14px;
  }
  .item {
    padding: 9px 0;
  }
  .box-card {
    width: 480px;
  }
  .chart-box {
    min-height: 400px;
  }
  .info {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .isShow {
  	display: none;
  }
  .item_bock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:94px;
    width: 300px;
    padding:0px 24px 0px 38px;
    border-bottom: 1px solid #f7f7f7;
    background: #fff;
  }
  .head_p {
    height:132px;
  }
  .head_img{
    height: 90px;
  }
  .head_img img{
    width:90px;
    height:90px;
    border-radius:50px
  }
  .account {
    font-size: 16px;
    margin-left: 50px;
  }
   .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
